<template>
  <div class="commonBoxmp">
    <el-scrollbar class="HeightAuto">
      <div class="chat-container">
    <!-- 头部 -->
    <div class="chat-header">
      <div class="header-left">
        <div class="avatar">
          <img src="https://picsum.photos/id/237/40/40" alt="豆包AI头像">
        </div>
        <div class="title">
          <h3>豆包AI助手</h3>
          <p class="status">在线 · 随时为你服务</p>
        </div>
      </div>
      <div class="header-right">
        <el-icon @click="handleMinimize" class="action-icon">
          <Minus />
        </el-icon>
        <el-icon @click="handleMaximize" class="action-icon">
          <Expand />
        </el-icon>
        <el-icon @click="handleClose" class="action-icon">
          <Close />
        </el-icon>
      </div>
    </div>
    
    <!-- 消息区域 -->
    <div class="chat-messages" ref="messagesRef">
      <div 
        v-for="(message, index) in messages" 
        :key="index" 
        class="message-wrapper"
      >
        <div 
          class="message"
          :class="message.type === 'user' ? 'user-message' : 'assistant-message'"
        >
          <div class="avatar">
            <img 
              :src="message.type === 'user' ? userAvatar : botAvatar" 
              alt="头像"
            >
          </div>
          <div class="message-content">
            <!-- <div class="message-text" v-html="message.content"></div> -->
            <MessageRenderer :content="message.content" :type="message.type" />
          </div>
        </div>
      </div>
    </div>
    
    <!-- 输入区域 -->
    <div class="chat-input-area">
      <div class="toolbar">
       
        <!-- <el-icon class="toolbar-icon">
          <Picture />
        </el-icon> -->
        <!-- <el-icon class="toolbar-icon">
          <Document />
        </el-icon> -->
       
      </div>
      <div class="input-container">
   
        <el-input
          v-model="inputValue"
           type="textarea"
           :rows="4"
          placeholder="请输入消息..."
          @keyup.enter.native="sendMessage"
          ref="inputRef"
          
        ></el-input>
      </div>
      <div class="send-container"  >
        <span class="word-count">{{ inputValue.length }}/2000</span>
        <el-button type="primary"
         :loading="loading"
         @click="sendMessage" :disabled="loading||!inputValue.trim()" class="send-button">
          发送
        </el-button>
      </div>
    </div>
  </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="tsx">
import { ref, onMounted, nextTick } from 'vue'
import { Minus, Expand, Close, Picture, Document } from '@element-plus/icons-vue'
import {
MessageRenderer
} from './components/index'
import 'highlight.js/styles/default.css'//md渲染器使用
// 导入Markdown文件内容（需要正确配置vite/webpack）
import dataMd from './test.md?raw'
import OpenAI from "openai";
// 定义响应式数据
const inputValue = ref('')
const messages = ref([
  {
    type: 'user',
    content:dataMd
  },
  {
    type: 'user',
    content:`dataMd`
  },
])
const userAvatar = 'https://picsum.photos/id/64/40/40'
const botAvatar = 'https://picsum.photos/id/237/40/40'
const messagesRef = ref(null)
const inputRef = ref(null)
const loading = ref(false)
const openai = new OpenAI(
    {
        dangerouslyAllowBrowser:true,
        // 若没有配置环境变量，请用百炼API Key将下行替换为：apiKey: "sk-xxx",
        apiKey: import.meta.env.VITE_DASHSCOPE_API_KEY, // 如何获取API Key：https://help.aliyun.com/zh/model-studio/developer-reference/get-api-key
        baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1",
    }
);
// 发送消息函数
const sendMessage =async () => {
  const content = inputValue.value.trim()
  if (!content) return
  
  // 添加用户消息
  messages.value.push({
    type: 'user',
    content: content
  })
  loading.value = true;
  // 清空输入框
  inputValue.value = ''
  
  // 滚动到底部
  scrollToBottom()
  
  // 模拟AI回复
      const completion:any = await openai.chat.completions.create({
        
        // 模型列表：https://help.aliyun.com/zh/model-studio/getting-started/models
        model: "qwen-plus",  // qwen-plus 属于 qwen3 模型，如需开启思考模式，请参见：https://help.aliyun.com/zh/model-studio/deep-thinking
        messages: [
            { role: "user", content:content }
        ],
    });
       scrollToBottom()
       console.log('object :>> ', completion);
         loading.value = false;
           messages.value.push(completion.choices[0].message)

}



// 滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    const container = messagesRef.value
    if (container) {
      container.scrollTop = container.scrollHeight
    }
  })
}

// 头部操作函数
const handleMinimize = () => {
  console.log('最小化')
}

const handleMaximize = () => {
  console.log('最大化')
}

const handleClose = () => {
  console.log('关闭')
}

// 组件挂载后聚焦到输入框并滚动到底部
onMounted(() => {
  inputRef.value?.focus()
  scrollToBottom()
})
</script>

<style scoped lang="scss">
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #e8e8e8;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-left .avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.header-left .title h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: #333;
}

.header-left .title .status {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.header-right {
  display: flex;
  gap: 16px;
}

.action-icon {
  font-size: 16px;
  color: #999;
  cursor: pointer;
  transition: color 0.2s;
}

.action-icon:hover {
  color: #333;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background-color: #f9f9f9;
}

.message-wrapper {
  margin-bottom: 16px;
}

.message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 90%;
}

.user-message {
  margin-left: auto;
  flex-direction: row-reverse;
}

.message .avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.message-content {
  position: relative;
  padding: 10px 16px;
  border-radius: 8px;

}

.user-message .message-content {
  background-color: #fff;
  color: #333;
}

.assistant-message .message-content {
  background-color: #fff;
  color: #333;
  border: 1px solid #e8e8e8;
}

.chat-input-area {
  padding: 12px 16px;
  background-color: #ffffff;
  border-top: 1px solid #e8e8e8;
}

.toolbar {
  display: flex;
  gap: 16px;
  padding-bottom: 8px;
  color: #999;
}

.toolbar-icon {
  font-size:24px;
  cursor: pointer;
  transition: color 0.2s;
}

.toolbar-icon:hover {
  color: #409eff;
}

.input-container {
  margin-bottom: 8px;
}

.input-container .el-input__inner {
  border-radius: 8px;
  padding: 10px 12px;
}

.send-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.word-count {
  font-size: 12px;
  color: #999;
}

.send-button {
  padding: 8px 20px;
  border-radius: 4px;
}
</style>
